<template>
  <div class="modal-from">
    <a-modal
      title="新增项目类别"
      :width="800"
      style="top: 50px;"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="submit"
      @cancel="handleCancel"
    >
      <div class="table-page-search-wrapper">
        <a-form :form="form" layout="inline" >
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                label="名称"
                :wrapperCol="wrapperCol"
                has-feedback
              >
                <a-input
                  style="width: 100%"
                  placeholder="请输入"
                  v-decorator="['name',{rules: [{ required: true, message: '请输入！' }]}]"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="代码"
                :wrapperCol="wrapperCol"
                has-feedback
              >
                <a-input
                  style="width: 100%"
                  placeholder="请输入"
                  v-decorator="['code',{rules: [{ required: true, message: '请输入！' }]}]"/>
              </a-form-item>

            </a-col>

          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                label="类别"
                :wrapperCol="wrapperCol"
                has-feedback
              >
                <a-tree-select
                  allowClear
                  v-decorator="['parentId',{rules: [{ required: true, message: '请输入！' }]}]"
                  style="width: 100%"
                  :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
                  :treeData="treeData"
                  placeholder="请选择类别"
                  :replaceFields="replaceFields"
                  @change="initrOrgName"
                >
                  <span slot="title" slot-scope="{ id }">{{ id }}</span>
                </a-tree-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="拼音码"
                :wrapperCol="wrapperCol"
                has-feedback
              >
                <a-input
                  style="width: 100%"
                  placeholder="请输入"
                  v-decorator="['pyCode',{rules: [{ required: true, message: '请输入！' }]}]"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                label="状态"
                style="margin-left: 12px;"
                :wrapperCol="wrapperCol"
              >
                <a-radio-group  v-decorator="['isDisabled', { initialValue:0},{rules: [{ required: false, message: '请选择是否有效沟通！' }]}]"  >
                  <a-radio :value="0">启用</a-radio>
                  <a-radio :value="1">关闭</a-radio>
                </a-radio-group>
              </a-form-item>

            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                label="电网使用"
                style="margin-left: 12px;"
                :wrapperCol="wrapperCol"
              >
                <a-radio-group  v-decorator="['isDw', { initialValue:0},{rules: [{ required: false, message: '请选择是否有效沟通！' }]}]"  >
                  <a-radio :value="0">是</a-radio>
                  <a-radio :value="1">否</a-radio>
                </a-radio-group>
              </a-form-item>

            </a-col>
            <a-col :span="12">
              <a-form-item
                label="咨询使用"
                style="margin-left: 12px;"
                :wrapperCol="wrapperCol"
              >
                <a-radio-group  v-decorator="['isZx', { initialValue:0},{rules: [{ required: false, message: '请选择是否有效沟通！' }]}]"  >
                  <a-radio :value="0">是</a-radio>
                  <a-radio :value="1">否</a-radio>
                </a-radio-group>
              </a-form-item>

            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-modal>
  </div>

</template>

<script>
function queryTreeData(data) {
  for(let i=0;i<data.length;i++){
    if (data[i].id==null||data[i].id==undefined||!data[i].id) {

      console.log('id没有数据',data[i].id)
    }
    if (data[i].children&&data[i].children.length>0) {
      queryTreeData(data[i].children)
    }
  }
}
/**
 增加title
 * */

const addTitleToTreeData = (data) => {
  data.forEach(item => {
    item.title = item.name
    if (item.children) {
      addTitleToTreeData(item.children)
    }
  })
  return data
}
import { getItemClasssify,addItemType } from '@/api/modular/main/customer/customerScene'

export default {
  props: {
    modal_type:{
      type:String,
      default:'add'
    },
    row_record:{
      type:Object,
      default:()=>{}
    },
  },
  data() {
    return {
      value: [],
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      treeData: [],
      orgTree: [],
      replaceFields: {
        title: 'name',
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      customerTableLoading: false,
      pagination: {
        current: 1,//当前页
        pageSize: 10,//当前页数
        total: 0,//总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30'],//这里注意只能是字符串，不能是数字
        showTotal: total => `共有 ${total} 条数据`//分页中显示总的数据
      },
      customerDataTable: [],
    }
  },
  methods: {
    // 初始化方法
    add() {
      this.visible = true
      getItemClasssify().then(res=>{
        this.treeData=res.data
        console.log('9999',this.treeData)
      })
      this.$nextTick(()=>{
        console.log('111',this.modal_type,this.row_record)
        if(this.modal_type=='add'){
          // this.form.resetFields()
          return
        }
        if(this.modal_type=='edit'){
          const record = this.row_record
          this.form.setFieldsValue({
            'code':record.code,
            'name':record.name,
            'printName':record.printName,
            'itemUnit':record.itemUnit,
          })
        }
      })

    },
    /**
     提交表单
     * */
    submit() {
      const { form: { validateFields } } = this
      validateFields((errors, values) => {
        this.confirmLoading = true
        if (errors) {
          console.log('表单检验未通过111', errors, values)
          this.confirmLoading = false
          return
        }
        values.oneStepId = 0
        values.twoStepId = 0
        values.threeStepId = 0
        values.itemType=0
        addItemType(values).then(res=>{
          console.log('222',res)
          this.confirmLoading = false
        })
        console.log('表单检验通过222', values)
      })
    },
    /**
     * 选择树机构，初始化机构名称于表单中
     */
    initrOrgName(value) {
      console.log('666',value)
      // this.form.getFieldDecorator('parentId', {initialValue: this.orgList.find(item => value === item.id).name})
    },
    /**
     分页动作监听
     * */
    handleTableChange(pagination) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.queryParam.pageNum = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      this.getList()
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-card-head-title {
  font-weight: bold;
}

/deep/ .ant-page-header-heading-title {
  font-weight: normal;
  font-size: 16px;
}

/deep/ .ant-card-body {
  padding: 24px 12px 0 !important;
}

/deep/ .ant-form-item-control-wrapper {
  width: 100%;
}
/deep/ .ant-form-item-control{
  width: 100%;
}
</style>